<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
    <div>
        <el-card style="padding-bottom: 100%;">
            <div style="text-align: center;">
                <span style="padding:10px 72px 0 0">
                    <el-button type="info" size="medium" @click="goBack" round>返回列表</el-button>
                </span>
            </div>
            <el-card class="cardClass">
                <el-row type="flex" class="tip">评级基础信息</el-row>
                <div class="divClass">
                    <el-form inline ref="formRef" :model="formData" label-width="80px" size="small" style="text-align: left" :rules="rules">
                        <el-row type="flex" style="padding: 13px 76px 0 76px">
                            <el-col :md="12" :lg="12">
                                <el-form-item label="客户名称" prop="customerId">
                                    <ft-rating-customer v-model="formData.customerId" 
                                                        :editing="!formDisabled" 
                                                        @change="customerChange">
                                    </ft-rating-customer>
                                </el-form-item>
                            </el-col>
                            <el-col :md="12" :lg="12">
                                <el-form-item label="评级模版" prop="ratingTemplateId">
                                    <ft-rating-template v-model="formData.ratingTemplateId" 
                                                        :editing="!formDisabled" 
                                                        @change="ratingTemplateChange">
                                    </ft-rating-template>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <hr class="hrClass">
                        <el-row style="padding: 16px 36px 24px 0">
                            <el-col align="right">
                                <el-button size="mini" @click="onCancel" :disabled="cancelDisabled">取消</el-button>
                                <el-button type="primary" size="mini" @click="onSave" :disabled="saveDisabled">保存</el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </el-card>
        </el-card>
    </div>
</template>

<script>
import FtRatingCustomer from "../../ft/FtRatingCustomer.vue";
import FtRatingTemplate from "../../ft/FtRatingTemplate.vue";
export default {
    components: {FtRatingCustomer, FtRatingTemplate},
    props: {
        propsData: {
            type: Object,
            default: null
        },
        isFormDisabled: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            //表单数据
            formData: {},
            //保存按钮控制，默认灰显
            saveDisabled: true,
            //取消按钮控制
            cancelDisabled: true,
            //指标分类标识：指标大类
            categoryLarge: 'LARGE',
            //不可编辑
            formDisabled: true,
            //基本信息校验规则
            rules: {
                customerId: [
                    {
                        required: true, //是否必填
                        message: '客户名称不能为空', //规则
                        trigger: 'blur'  //何事件触发
                    },
                ],
                ratingTemplateId: [
                    {
                        required: true, //是否必填
                        message: '模版名称不能为空', //规则
                        trigger: 'blur'  //何事件触发
                    },
                ],
            },
        }
    },
    mounted(){
        this.formData=JSON.parse(JSON.stringify(this.propsData))
        this.formDisabled=this.isFormDisabled
        this.saveDisabled=this.isFormDisabled
        this.cancelDisabled=this.isFormDisabled
    },
    methods: {
        //返回
        goBack(){
            this.$emit("returnList")
        },
        //取消
        onCancel() {
            this.$emit("returnList")
        },
        //保存
        onSave() {
            this.$refs.formRef.validate((valid) => {
                if (valid) {
                    let url = "/joys-rest/lss-customer/rating/save"
                    this.$http.put(url, this.formData).then(
                        resp => {
                            this.formData = resp.body
                            this.formDisabled=true
                            this.saveDisabled=true
                            this.cancelDisabled=true
                            this.$message.success("保存成功！")
                            //保存成功后进入详情页面
                            this.$emit("returnDetail", this.formData)
                        },
                        resp => {
                            this.$message.error(resp.body.message)
                        }
                    )
                }
            })
        },
        //客户参照change事件
        customerChange(params){
            if(params.customerId){
                this.formData.customerId = params.customerId
                this.formData.customerName = params.customerName
                this.formData.identityType = params.identityType
                this.formData.identityNo = params.identityNo
                this.formData.industry = params.industry
                this.formData.industryBig = params.industryBig
                this.formData.enterpriseTypeId = params.enterpriseTypeId
                this.$refs.formRef.validateField("customerId")
            }
        },
        //模版参照change事件
        ratingTemplateChange(params){
            if(params.ratingTemplateId){
                this.formData.ratingTemplateId = params.ratingTemplateId
                this.formData.templateName = params.itemName
                this.$refs.formRef.validateField("ratingTemplateId")
            }
        },
    }
}
</script>

<style scoped>
.tip {
    font-family: 'PingFangSC-Medium';
    font-size: 14px;
    color: #747778;
    letter-spacing: 0;
    line-height: 36px;
}
.cardClass {
    padding: 35px 12px 139px 12px;
}
.cardClass >>> .el-card__body {
    padding: 0;
}
.divClass {
    background-color: #F4F8F9;
    padding: 35px 0 0;
}
.el-input {
    white-space: nowrap;
}
.hrClass {
    margin-top: 24px;
    border-width: thin;
    border: 0.5px solid rgba(179,179,179,0.20);
}
</style>
